<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
        <title>slider</title>
        <script src="zepto.min.js"></script>
        <script>
        var orientationchange = {};
        $(document).ready(function(){
         
             var sliderInstance = new slider({});
                
             orientationchange['index'] = function() {
                 //该模块的相应...
                sliderInstance.adaptiveDetection();
             }

             $('#del').on('tap',function(){
                var obj = sliderInstance.getCurrentInfo();
                sliderInstance.deleteIndex(obj.index);
             });

             $(window).bind('orientationchange.index',function(){
                setTimeout(function() {
                    if (moduleName=='index') {
                        orientationchange['index']();                                                           
                    }
                },500);
             });



        });

        (function($,win){

            win.slider = function(opt){
               //内部状态
               var touch = {
                    index : 0,
                    move : 0,
                    maxIndex : 0,
               };
               //默认参2数 
               var opt  = {
                    slider : $('.slider_box'),
                    index  : 0,
                    time : 200,
                    callback : function(obj){console.log(obj)}
               };

               //初始化
               this.init = function(config) {
                    opt = $.extend(opt, config); 
                    this.adaptiveDetection();
                    this.bindEvt(); 
               };
                           
               //自适应检测
               this.adaptiveDetection = function() {
                     //修改参数 
                     this.reset();
                     this.revisedDOM(); 
                     this.actionCss(touch.move,opt.time);                      
               };

               this.reset = function() {
                     touch.sliderNum = opt.slider.find('li').length; 
                     touch.width = opt.slider.width();
                     touch.height = opt.slider.height();
                     this.indexCheck(); //sliderNum变化，需要检测index的值。     
                     touch.move =  -(touch.index * touch.width);
               }; 

               this.revisedDOM = function() {
                     //修正兼容BUG
                     opt.slider.css({
                        height:touch.height+'px',
                        width:touch.width+'px'
                     }).find('ul').css({
                        height: touch.height+'px',
                        width: touch.width+'px',
                     }).find('li').css({
                        height: touch.height+'px',
                        width: touch.width+'px',
                     /*
                     }).find('img').css({
                        'max-width' : touch.width+'px',
                        'max-height' : touch.height+'px'
                     */
                     });
               };

               this.bindEvt = function() {
                     
                    var tthis = this;
                     
                    opt.slider.on('touchstart',function(e){
                        touch.timeStart = new Date().getTime();
                        touch.x1 = e.touches[0].pageX;
                        touch.y1 = e.touches[0].pageY;
                        touch.x2 = e.touches[0].pageX;
                        touch.y2 = e.touches[0].pageY;
                        bool = true;
                    }).on('touchmove',function(e){
                        if (bool) {
                            touch.x2 = e.touches[0].pageX;
                            touch.y2 = e.touches[0].pageY;
                            tthis.touchDirection();
                             if (touch.direction == 'x') {
                                e.preventDefault();
                                e.stopPropagation();
                                tthis.moveX(touch.x2-touch.x1);
                             }
                        }
                    }).on('touchend',function(e){
                         if (bool) {
                             bool = false;
                             touch.timeEnd = new Date().getTime();
                             if (touch.direction == 'x') {
                                e.preventDefault();
                                e.stopPropagation();
                                var timeNum = touch.timeEnd - touch.timeStart;
                                if (touch.x2 - touch.x1 > 50 && timeNum < 500) {
                                   tthis.swipeRightMoveX(touch.width,this);
                                } else if (touch.x2 - touch.x1 < -50 && timeNum < 500){
                                   tthis.swipeLeftMoveX(touch.width,this);
                                } else {
                                   tthis.swipeMoveX(touch.x2-touch.x1,this);
                                } 
                            }
                         }
                    });      


               };

               this.moveX = function(moveNum) {
                    var moveNum = touch.move + moveNum;
                        moveNum = this.touchMoveConditionX(moveNum);
                    this.actionCss(moveNum,opt.time);
               },

               this.swipeRightMoveX = function(moveNum,currentSlider) {
                    touch.move += moveNum;
                    touch.move = this.touchMoveConditionX(touch.move);
                    this.actionCss(touch.move,opt.time);
                    this.touchCurrentIndex(true,currentSlider); 
                    this.touchMoveEnd();
               };

               this.swipeLeftMoveX = function(moveNum,currentSlider) {
                    console.log(touch.move,moveNum);
                    touch.move += -moveNum;
                    touch.move = this.touchMoveConditionX(touch.move); 
                    this.actionCss(touch.move,opt.time);
                    this.touchCurrentIndex(false,currentSlider); 
                    this.touchMoveEnd();
               };

               this.touchMoveEnd = function() {
                    opt.callback(touch); 
               };

               this.swipeMoveX = function(moveNum,currentSlider) {
                   var moveNum = Math.abs(moveNum);
                   
                   if(moveNum < touch.width/2) {
                      moveNum = 0;
                   } else {
                      moveNum = touch.width;
                   }

                   if ((touch.x2-touch.x1) < 0 ) {
                       this.swipeLeftMoveX(moveNum,currentSlider); 
                   } else {
                       this.swipeRightMoveX(moveNum,currentSlider); 
                   }
               };

               this.touchMoveConditionX = function(moveNum) {
                    if (moveNum > 0 ) {
                        moveNum = 0;
                    } else if (moveNum < -(touch.width * (touch.sliderNum-1))) {
                        moveNum = -(touch.width * (touch.sliderNum-1));
                    }
                    return moveNum;
               };

               this.touchDirection = function() {
                    touch.direction = 'x';
                    if (Math.abs(touch.x1 - touch.x2) > Math.abs(touch.y1 - touch.y2)) {
                         touch.direction = 'x';
                    } else {
                         touch.direction = 'y';
                    }                
               },
                    
               this.touchCurrentIndex = function(bool,currentSlider) {
                    var index = opt.slider.find('li').index(currentSlider);
                    if (bool) {
                        touch.index -= 1;
                    } else {
                        touch.index += 1;
                    }
               
                    this.indexCheck();     
               },

               this.indexCheck = function() {
                    if(touch.index > touch.sliderNum-1 ) {
                        touch.index = touch.sliderNum-1      
                    } else if (touch.index < 0 ) {
                        touch.index = 0;
                    }
               },
 
               this.deleteIndex = function(index) {
                    opt.slider.find('li').eq(index).remove();
                    this.reset();
                    this.actionCss(touch.move,opt.time);  
               };

               this.getCurrentInfo = function() {
                    console.log(touch);
                    return touch;
               };

               this.removeSlider = function() {
                   //移除，清除该实例
                   opt.slider.remove();
               };
 
               this.actionCss = function(moveNum,time) {
                    opt.slider.find('ul').attr('style',' -moz-transform: translate('+moveNum+'px); -moz-transition: '+time+'ms linear; -webkit-transform: translate('+moveNum+'px); -webkit-transition: '+time+'ms linear; transition: '+time+'ms linear; height:'+touch.height+'px;line-height:'+touch.height+'px;');
               };

               this.init(opt);
             } 

        })(Zepto,window);


       



        </script>     

        <style type="text/css">
          body {
               padding:0;
               margin:0
          }

          .slider_box {
               width: 320px;
               max-width: 320px;
               height: 260px;
               overflow: hidden;
               margin: 0 auto;
          } 

          .slider_content {
                list-style: none;
                padding: 0px;
                margin: 0px;
                width: 100%;
                display: box;
                display: -webkit-box;
                display: -moz-box;
                height: 260px;
          }


        </style>
    </head>
<body>

    <div class='slider_box'>

        <ul class='slider_content'>
        <li class="slider-group">
             <div class="slider-item">
                  <img class="" src="http://s.tmatch.com/de/picssb75/8/988/1694988-1091134.jpg" url="http://s.tmatch.com/de/picssb75/8/988/1694988-1091134.jpg" style="width:320px">
             </div>
        </li>

        <li class="slider-group">
             <div class="slider-item">
                  <img class="" src="http://s.tmatch.com/de/picssb75/8/988/1694988-1090932.jpg" url="http://s.tmatch.com/de/picssb75/8/988/1694988-1090932.jpg" style="width:320px">
             </div>
        </li>

        <li class="slider-group">
             <div class="slider-item">
                  <img class="" src="http://s.tmatch.com/de/picssb75/8/988/1694988-1090862.jpg" url="http://s.tmatch.com/de/picssb75/8/988/1694988-1090862.jpg" style="width:320px">
             </div>
        </li>

        <li class="slider-group">
             <div class="slider-item">
                  <img class="" src="http://s.tmatch.com/de/picssb75/8/988/1694988-1090878.jpg" url="http://s.tmatch.com/de/picssb75/8/988/1694988-1090878.jpg" style="width:320px">
             </div>
        </li>
        </ul>
    </div>


    <div><button id='del'>删除当前一张照片，在滑动44</button><div>


</body>
</html>














